<!--历史水位管理模块-->
<template>
  <div class="container">
    <div class="app-container">
      <!-- 操作栏 -->
      <div class="role-operate" style="display: flex; justify-content: space-between; align-items: center">
        <div>
          <input ref="fileInput" type="file" hidden accept=".xls,.xlsx" @change="handleFileChange" />
          <el-button size="mini" type="primary" @click="triggerUpload">上传Excel导入</el-button>
        </div>
        <div style="display: flex; align-items: center">
          <el-input
            v-model="searchHoleId"
            placeholder="请输入孔号查询"
            size="mini"
            style="width: 200px; margin-right: 10px"
            clearable
            @keyup.enter.native="handleSearch"
          />
          <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>
      <!-- 放置table组件 -->
      <el-table :data="markers">
        <!-- 放置列 -->
        <el-table-column prop="time" align="center" width="300" label="时间">
          <template v-slot="{ row }">
            <!-- 条件判断 -->
            <el-input v-if="row.isEdit" v-model="row.editRow.name" size="mini" />
            <span v-else>{{ row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="water" align="center" width="300" label="水位">
          <template v-slot="{ row }">
            <!-- 条件判断 -->
            <el-input v-if="row.isEdit" v-model="row.editRow.name" size="mini" />
            <span v-else>{{ row.waterLevel }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="hole_id" align="center" width="300" label="孔号">
          <template v-slot="{ row }">
            <!-- 条件判断 -->
            <el-input v-if="row.isEdit" v-model="row.editRow.name" size="mini" />
            <span v-else>{{ row.holeLocationId }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <template v-if="row.isEdit">
              <!-- 编辑状态 -->
              <el-button type="primary" size="mini" @click="btnEditOK(row)">确定</el-button>
              <el-button size="mini" @click="row.isEdit = false">取消</el-button>
            </template>
            <template v-else>
              <!-- 非编辑状态 -->
              <el-button size="mini" type="text" @click="exit(row.time,row.waterId,row.holeLocationId,row.waterLevel)">编辑</el-button>
              <el-button style="margin-left:10px" size="mini" type="text" @click="confirmDel(row.waterId)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
<!--      <el-row type="flex" style="height:60px" align="middle" justify="end">-->
<!--        &lt;!&ndash; 放置分页组件 &ndash;&gt;-->
<!--        <el-pagination-->
<!--          :page-size="pageParams.pagesize"-->
<!--          :current-page="pageParams.page"-->
<!--          :total="pageParams.total"-->
<!--          layout="prev, pager, next"-->
<!--          @current-change="changePage"-->
<!--        />-->
<!--      </el-row>-->
    </div>
    <!-- 放置新增弹层 -->
    <el-dialog width="500px" title="新增水位" :visible.sync="showDialog" @close="insertCancel">
      <!-- 表单内容 -->
      <el-form ref="roleFormInsert" :model="roleFormInsert" label-width="120px">
        <el-form-item prop="time" label="时间">
          <el-input v-model="roleFormInsert.time" style="width:300px" size="mini" />
        </el-form-item>
        <el-form-item prop="waterLevel" label="水位">
          <el-input v-model="roleFormInsert.waterLevel" style="width:300px" size="mini" />
        </el-form-item>
        <el-form-item prop="holeLocationId" label="孔号">
          <el-input v-model="roleFormInsert.holeLocationId" style="width:300px" size="mini" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button type="primary" size="mini" @click="insertOk">确定</el-button>
            <el-button size="mini" @click="insertCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 放置编辑弹层 -->
    <el-dialog width="500px" title="编辑水位" :visible.sync="showExitDialog" @close="btnExitCancel">
      <!-- 表单内容 -->
      <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
        <el-form-item prop="time" label="时间">
          <el-input v-model="roleForm.time" style="width:300px" size="mini" />
        </el-form-item>
        <el-form-item prop="water" label="水位">
          <el-input v-model="roleForm.waterLevel" style="width:300px" size="mini" />
        </el-form-item>
        <el-form-item prop="hole_id" label="孔号">
          <el-input v-model="roleForm.holeLocationId" style="width:300px" size="mini" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button type="primary" size="mini" @click="btnExitOK">确定</el-button>
            <el-button size="mini" @click="btnExitCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Water',
  data() {
    return {
      searchHoleId: '',
      list: [],
      markers: [
        { time: '2023/12/19', water: '25m', hole_id: 's22' },
        { time: '2024/1/19', water: '25m', hole_id: 's22' },
        { time: '2024/2/19', water: '38m', hole_id: 's22' },
        { time: '2024/3/19', water: '46m', hole_id: 's22' },
        { time: '2024/4/19', water: '34m', hole_id: 's22' },
        { time: '2024/5/19', water: '28m', hole_id: 's23' }
      ],
      showDialog: false, // 控制弹层显示隐藏
      showExitDialog: false, // 控制弹层显示隐藏
      // 将分页信息放置到一个对象中
      pageParams: {
        page: 1, // 第几页
        pagesize: 5, // 每页多少条
        total: 0
      },
      roleForm: {
        waterId: '',
        time: '',
        waterLevel: '',
        holeLocationId: ''
      },
      roleFormInsert: {
        waterId: '',
        time: '',
        waterLevel: '',
        holeLocationId: ''
      },
      permissionData: [],
      currentRoleId: null,
      permIds: []
    }
  },
  created() {
    this.getWaterList()
  },
  methods: {
    // 触发文件选择
    triggerUpload() {
      this.$refs.fileInput.click()
    },

    // 处理文件选择
    async handleFileChange() {
      const input = this.$refs.fileInput
      const file = input.files[0]
      if (!file) return

      const formData = new FormData()
      formData.append('file', file)

      try {
        const response = await axios.post(
          'http://127.0.0.1:8080/water-level-histories/uploadWaterExcel',
          formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        )
        console.log('handleFileChange的response.data = ', response.data)
        if (response.data) {
          this.$message.success('导入成功')
          this.getWaterList()
        } else {
          this.$message.error(`导入失败: ${response.data.message}`)
        }
      } catch (error) {
        this.$message.error('文件上传失败')
      } finally {
        // 直接操作ref引用的DOM元素
        input.value = ''
      }
    },

    // 处理查询
    async handleSearch() {
      try {
        if (this.searchHoleId) {
          const response = await axios.get('http://localhost:8080/water-level-histories/gets', {
            params: { holeid: this.searchHoleId }
          })
          console.log('handleSearch的response.data = ', response.data)
          if (response.data) {
            this.markers = response.data.data
          } else {
            this.$message.error('未查询到结果: ' + response.data.message)
          }
        } else {
          this.getWaterList()
          return
        }
      } catch (error) {
        this.$message.error('存在异常，查询失败')
      }
    },
    async getWaterList() {
      try {
        const response = await axios.get('http://localhost:8080/water-level-histories/getAll')
        console.log('waterlist的response.data = ', response.data)
        if (response.data.code === '0') {
          this.markers = response.data.data
        } else {
          // 查询失败
          this.$message.success('查询水位失败')
        }
      } catch (error) {
        this.$message.success('查询水位失败')
      }
    },
    async insertOk() {
      try {
        const response = await axios.post('http://localhost:8080/water-level-histories/add', {
          time: this.roleFormInsert.time,
          waterLevel: this.roleFormInsert.waterLevel,
          holeLocationId: this.roleFormInsert.holeLocationId
        })
        console.log('addWater的response.data = ', response.data)
        if (response.data.code === '0') {
          this.getWaterList()
          this.$refs.roleFormInsert.resetFields() // 重置表单数据
          this.showDialog = false
        } else {
          this.$message.success('新增水位失败')
        }
      } catch (error) {
        this.$message.success('新增水位失败')
      }
    },
    insertCancel() {
      this.$refs.roleForm.resetFields() // 重置表单数据
      this.showDialog = false // 关闭弹层
    },
    exit(time, waterId, holeLocationId, waterLevel) {
      this.showExitDialog = true
      this.roleForm.time = time
      this.roleForm.holeLocationId = holeLocationId
      this.roleForm.waterLevel = waterLevel
      this.roleForm.waterId = waterId
    },
    async btnExitOK() {
      try {
        const response = await axios.post('http://localhost:8080/water-level-histories/update/' + this.roleForm.waterId, {
          time: this.roleForm.time,
          waterLevel: this.roleForm.waterLevel,
          holeLocationId: this.roleForm.holeLocationId
        })
        console.log('updateWater的response.data = ', response.data)
        if (response.data.code === '0') {
          this.getWaterList()
        } else {
          this.$message.success('编辑水位失败')
        }
      } catch (error) {
        this.$message.success('编辑水位失败')
      }
      this.btnExitCancel()
    },
    btnExitCancel() {
      this.showExitDialog = false // 关闭弹层
      this.$refs.roleForm.resetFields() // 重置表单数据
    },
    // 删除的时候点击了确定触发的
    async  confirmDel(waterId) {
      console.log('删除的水位id = ', waterId)
      try {
        const response = await axios.delete('http://localhost:8080/water-level-histories/delete/' + waterId)
        console.log('delWater的response.data = ', response.data)
        if (response.data.code === '0') {
          this.getWaterList()
          this.$message.success('删除水位成功')
        } else {
          this.$message.success('删除水位失败')
        }
      } catch (error) {
        this.$message.success('删除水位失败')
      }
    }
  }
}
</script>
<style scoped>
.role-operate {
  padding: 10px;
}
</style>
